<template>
	<view>
		<view class="container" v-if="tabIndex==0">
			<swiper :autoplay="true" class="swiper_box">
			  <block v-for="item in swiperList" :key="item.id">
			    <swiper-item>
			      <image :src="item.advertPic" class="swiper-item" mode="aspectFill"></image>
			    </swiper-item>
			  </block>
			</swiper>
			<view>
			  <view class="list_item flex_box" v-for='item in customerList' :key='item.id' @tap="goApplition(item)">
			    <image :src="item.customerInfo.headPic || defaultImg" class="avatar" mode="aspectFill"></image>
			    <view class="flex1 right_box">
			      <view class="flex_box customer_info">
							<view class="customer_label">客户姓名</view>
							<view class="customer_con">{{item.customerInfo.customerName}}</view>
						</view>
						<view class="flex_box customer_info">
							<view class="customer_label">联系方式</view>
							<view class="customer_con">{{item.customerInfo.customerPhone}}</view>
						</view>
						<view class="flex_box customer_info">
							<view class="customer_label">联系地址</view>
							<view class="customer_con">{{item.customerInfo.customerAddr}}</view>
						</view>
			    </view>
			  </view>
			</view>
			<empty-page v-if="customerList.length==0&&listStatus"></empty-page>
		</view>
		<view v-if="tabIndex==1" class="container container1">
			<view class="table_box">
				<view class="flex_box table_th">
					<view class="table_th_item table_td_item1">客户名称</view>
					<view class="flex1 table_th_item">签到时间</view>
					<view class="table_th_item table_td_item1">服务时长</view>
				</view>
				<view class="flex_box table_tr" v-for='(item,index) in hisList' :key='index'>
					<view class="table_td_item table_td_item1">{{item.customerName}}</view>
					<view class="flex1 table_td_item">{{item.crtDt}}</view>
					<view class="table_td_item table_td_item1">{{item.useClassCount || 0}}小时</view>
				</view>
				<empty-page v-if="hisList.length==0&&listStatus"></empty-page>
			</view>
			<view class="tips">仅展示最近一个月的签到记录</view>
		</view>
		<view class="loginout" @tap="loginout">退出</view>
		<view class="tabs flex_box">
		  <view 
		    class="tab_item" 
				:class="tabIndex==index?'cur':''"
		    @tap='tabChange(index)'
				:key='index'
		    v-for='(item,index) in list'>{{item}}</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				swiperList:[],
				list:['签到打卡','签到历史'],
				tabIndex:0,
				customerList:[],
				hisList:[],
				defaultImg:require('@/static/images/img2.png'),
				pageNum:1,
				pages:0,
				teacherInfo:'',
				listStatus:false
			}
		},
		onLoad() {
			this.queryAllAdvertListByType()
		},
		onShow() {
			// let teacher_userinfo = {
			// 	teacherAppId: "wx08c19827d10b78fe",
			// 	teacherNo: "T2021090500006",
			// 	teacherOpenId: "oUEQCw93yZ5Zp4h4mZvGho22_UEU",
			// 	teacherUnionId: "",
			// }
			// uni.setStorageSync('teacher_userinfo',teacher_userinfo)
			let info = uni.getStorageSync('teacher_userinfo')
			if (!info) {
				uni.navigateTo({
					url:'/pages/login/login?type=index'
				})
				return
			}
			this.teacherInfo = info
			if (this.tabIndex == 0) {
				this.queryCustomerTeacherInfoListByTeacherNo()
			} else {
				this.queryTeacherSignLogList()
			}
		},
		methods: {
			tabChange(index) {
				this.tabIndex = index
				this.listStatus = false
				if (this.tabIndex == 0) {
					this.queryCustomerTeacherInfoListByTeacherNo()
				} else {
					this.queryTeacherSignLogList()
				}
			},
			// 轮播图数据
			queryAllAdvertListByType() {
				this.$api.queryAllAdvertListByType({advertType:2}).then(res=>{
					this.swiperList = res.data
				})
			},
			queryCustomerTeacherInfoListByTeacherNo() {
				let param = {
					teacherNo:this.teacherInfo.teacherNo
				}
				console.log(param)
				this.$api.queryCustomerTeacherInfoListByTeacherNo(param).then(res=>{
					if (res.code == 1) {
						this.customerList = res.data
						uni.stopPullDownRefresh()
						this.listStatus = true
					}
				})
			},
			goApplition(item) {
				let info = item.customerInfo
				uni.setStorageSync('teacher_info',info)
				uni.navigateTo({
					url:'/pages/application/application?customerCode='+info.customerCode,
				})
			},
			queryTeacherSignLogList() {
				let param = {
					teacherNo:this.teacherInfo.teacherNo,
					pageNum:this.pageNum,
					pageSize:10
				}
				this.$api.queryTeacherSignLogList(param).then(res=>{
					if (res.code == 1) {
						this.pages = res.data.pages
						if (this.pageNum == 1) {
							this.hisList = []
							this.listStatus = true
						}
						uni.stopPullDownRefresh()
						let list = res.data.list
						this.hisList.push.apply(this.hisList,list)
					}
				})
			},
			loginout() {
				uni.removeStorageSync('teacher_userinfo')
				WeixinJSBridge.call('closeWindow');
			}
		},
		onPullDownRefresh() {
			if (this.tabIndex == 1) {
				this.pageNum = 1
				this.queryTeacherSignLogList()
			} else {
				this.queryCustomerTeacherInfoListByTeacherNo()
			}
		},
		onReachBottom() {
			if (this.tabIndex == 1 && this.pageNum > this.pages) {
				this.pageNum++
				this.queryTeacherSignLogList()
			}
		}
	}
</script>

<style scoped>
	@import '../../common/common.css';
	.container{
		min-height: 100vh;
	  padding:20rpx 30rpx 120rpx;
	  font-size: 26rpx;
	  color:#333;
		background-color: #fff;
		box-sizing: border-box;
	}
	.loginout{
		position: fixed;
		right: 20rpx;
		bottom:120rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #34BE97;
		color:#fff;
		border-radius: 50%;
		font-size: 26rpx;
	}
	.container1{
		background-color: #FAFAFA;
		padding:0;
	}
	.swiper_box{
	  height: 300rpx;
	}
	.swiper-item{
	  width: 100%;
	  height: 100%;
		border-radius: 20rpx;
	}
	.table_box{
		padding:30rpx 30rpx 95rpx;
		background-color: #fff;
	}
	.table_th{
	  height: 60rpx;
	  line-height: 60rpx;
	  background:#BAE4D9;
	  border-radius: 10rpx 10rpx 0 0;
	}
	.table_th_item{
	  text-align: center;
	  color:#333333;
	}
	.table_tr{
	  height: 60rpx;
	  line-height: 60rpx;
	  background:#fff;
		text-align: center;
		border:1px solid #eee;
		border-top: none;
	}
	.table_tr:last-child{
	  border-radius:0 0 10rpx 10rpx;
	}
	.table_td_item{
	  text-align: center;
	  border-right: 2rpx solid #F0F0F0;
		margin: 0 -2rpx -2rpx 0;
		box-sizing: border-box;
	}
	.table_td_item1{
	  width: 180rpx;
	}
	.tips{
		text-align: center;
		line-height: 38rpx;
		position: fixed;
		left: 0;
		bottom: 140rpx;
		width: 100%;
	}
	.tabs{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #eee;
	}
	.tab_item{
	  flex:1;
		min-width: 0;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #333333;
		font-size: 34rpx;
	}
	.tab_item.cur{
	  color: #fff;
		background-color: #34BE97;
	}
</style>
